<template>
	<view class="index_container">
	<!-- 轮播图 -->
	  <swiper indicator-dots="true" autoplay="true" interval="1500"	circular="true" indicator-color="#fff" indicator-active-color="#fb6600" >
	      <swiper-item v-for="item in banner_background">
	        <image :src="item" class="banner_img"  mode="widthFix"></image>
	      </swiper-item>
	  </swiper>
	  <!-- 小图标区域 -->
	  <view class="little_img">
	      <navigator v-for="item in little_img">
	        <image :src="item" mode="widthFix" class="littleimg"></image>
	      </navigator>
	  </view>
	  <!-- 大图区域 -->
	  <view class="large_img">
	  <navigator>
	    <image src="../../static/image/one.jpg" mode="widthFix"></image>
	  </navigator>
	  <navigator>
	    <image src="../../static/image/select.jpg" mode="widthFix"></image>
	  </navigator>
	  </view>
	  <!-- 商品列表 -->
	  <view class="goodsList">
	    <navigator class="goodsItem" v-for="item in goodsList">
	    <image :src="item.img" mode="widthFix"></image>
	    <text class="goodsTitle">{{item.title}}</text>
	    <text class="goodsDetail">{{item.detail}}</text>
	    <view>
	      <text class="newPrice">￥{{item.newPrice}}</text>
	      <text class="oldPrice">￥{{item.oldPrice}}</text>
	    </view>
	    <button>立即购买</button>
	    </navigator>
	  </view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				hei:"",
				banner_background: ['../../static/image/swiper1.jpg', '../../static/image/swiper2.jpg', '../../static/image/swiper3.jpg'],
				little_img:[
					'../../static/image/list1.png','../../static/image/list2.png',
					'../../static/image/list3.png','../../static/image/list4.png',
					'../../static/image/list5.png','../../static/image/list6.png',
					'../../static/image/list7.png','../../static/image/list8.png',
					'../../static/image/list9.png','../../static/image/list10.png'],
				goodsList:[
				  {
					id:1,
					path:'../../pages/detail/detail',
					img:'../../static/image/select1.jpg',
					title:'小米10 Pro',
					detail:'骁龙865/50倍变焦',
					newPrice:4999,
					oldPrice:5999
				  },
				  {
					id:2,
					path:'../../pages/detail/detail',
					img:'../../static/image/select2.jpg',
					title:'小米10 Pro',
					detail:'骁龙865/50倍变焦',
					newPrice:4999,
					oldPrice:5999
				  },
				  {
					id:3,
					path:'../../pages/detail/detail',
					img:'../../static/image/select3.jpg',
					title:'小米10 Pro',
					detail:'骁龙865/50倍变焦',
					newPrice:4999,
					oldPrice:5999
				  },
				  {
					id:4,
					path:'../../pages/detail/detail',
					img:'../../static/image/select4.jpg',
					title:'小米10 Pro',
					detail:'骁龙865/50倍变焦',
					newPrice:4999,
					oldPrice:5999
				  },
				  {
					id:5,
					path:'../../pages/detail/detail',
					img:'../../static/image/select5.jpg',
					title:'小米10 Pro',
					detail:'骁龙865/50倍变焦',
					newPrice:4999,
					oldPrice:5999
				  },
				  {
					id:6,
					path:'../../pages/detail/detail',
					img:'../../static/image/select6.jpg',
					title:'小米10 Pro',
					detail:'骁龙865/50倍变焦',
					newPrice:4999,
					oldPrice:5999
				  }
				]
			}
		},
		methods: {
			 
		}
	}
</script>

<style  lang="less" scoped>
	swiper{
		height: calc(100vw * 360 / 720);
	}
	.banner_img{
	  width: 100%;
	}
	.little_img{
	  display: flex;
	  flex-wrap: wrap;
	  width: 100%;
	  background-color: #fff;
	}
	.little_img navigator{
	  width: 20%;
	}
	.littleimg{
	  width: 100%;
	}
	.large_img{
	  width: 100%;
	}
	.large_img image{
	  width: 100%;
	}
	.goodsList{
	  display: flex;
	  flex-wrap: wrap;
	  width: 100%;
	}
	.goodsItem{
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  box-sizing: border-box;
	  width: 50%;
	  padding: 5px;
	  background-color: #f5f5f5;
	}
	.goodsItem image{
	  width: 100%;
	}
	.goodsTitle{
	  font-size: 45rpx;
	}
	.goodsDetail{
	  font-size: 25rpx;
	  color: #91b0cf;
	}
	.newPrice{
	  font-size: 40rpx;
	  color: red;
	  margin-right: 10rpx;
	}
	.oldPrice{
	  font-size: 30rpx;
	  color: grey;
	  text-decoration: line-through;
	}
	.goodsItem button{
	    margin-top: 10rpx;
	    width: 60%;
	    font-size: 25rpx;
	    background-color: red;
	    color:#fff;
	}
</style>
